<template>
	<div>

		<!-- 轮播图 区域 -->
		<mt-swipe :auto="3000">
			<!-- <mt-swipe-item v-for="item in lunboList" :key="item.url">
				<img :src="item.img" alt="">
			1</mt-swipe-item>-->
			<mt-swipe-item></mt-swipe-item>
			<mt-swipe-item></mt-swipe-item>
			<mt-swipe-item></mt-swipe-item>
		</mt-swipe>

		<!--grid-default.html文件 九宫格 改6宫格 区域 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	        <router-link to="/home/newslist">
		        <span class="mui-icon mui-icon-home"></span>
		        <div class="mui-media-body">Home</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		        <span class="mui-icon mui-icon-email">
		        <span class="mui-badge">5</span></span>
		        <div class="mui-media-body">Email</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	            <span class="mui-icon mui-icon-chatbubble"></span>
	            <div class="mui-media-body">Chat</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	            <span class="mui-icon mui-icon-location"></span>
	            <div class="mui-media-body">location</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	        	<span class="mui-icon mui-icon-search"></span>
	        	<div class="mui-media-body">Search</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	            <span class="mui-icon mui-icon-phone"></span>
	            <div class="mui-media-body">Phone</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		        <span class="mui-icon mui-icon-gear"></span>
		        <div class="mui-media-body">Setting</div></a></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		        <span class="mui-icon mui-icon-info"></span>
		        <div class="mui-media-body">about</div></a></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		        <span class="mui-icon mui-icon-more"></span>
		        <div class="mui-media-body">more</div></a></li>
	    </ul>
	</div>
</template>

<script>
import jsonp  from "jsonp";
import { Toast } from 'mint-ui';

export default {
	data() {
		return {
			lunbotuList: [] //保存轮播图的数组
		};
	},
	created() {
	 this.getLunbotu();
	},
	methods: {
		getLunbotu() {	//获取轮播图数据的方法
			//this.$http.get("api/getlunbo").then(result => {
				//console.log(result);
				//if (result.body.staus === 0) {
				//	this.lunbotuList = result.body.message;
				//	Toast('加载轮播图成功。。。')
				//}else {
				//	Toast('加载轮播图失败。。。')
				//}
				//jsonp("http://vue.studyit.io/api/getlunbo",function(){
				//cosnole.log("123")
				//})
			//});
		}
	}
}


</script>


<style lang="scss" scoped>
.mint-swipe {
	height: 200px;

	.mint-swipe-item {
		&:nth-child(1) {
			/*background-color: red;*/
			background: url('../images/1.jpg')
		}
		&:nth-child(2) {
			/*background-color: yellow;*/
			background: url('../images/2.jpg')
		}&:nth-child(3) {
			/*background-color: cyan;*/
			background: url('../images/3.jpg')
		}

	img {
		width: 100%;
		height: 100%;
	}
	}
}


.mui-table-view.mui-grid-9 {
	background-color: #fff;
	border: none;
}

.mui-table-view.mui-grid-9 .mui-table-view-cell {
	border: 0;
}
</style>